<template>
    <div class="video">
        <!-- 头部导航栏 -->
        <van-nav-bar
           class="tab"
           title="视频"
           @click-left="$router.back()"
           fixed
          >
          <template #left>
            <van-icon name="arrow-left" color="#fff" size="20"/>
          </template>
          <template #right>
            <van-icon name="share-o" color="#fff" size="20"/>
          </template>
      </van-nav-bar>
      <!-- 视频内容 -->
         
        <div class="video-wrap"  v-for=" i in videoData" :key="i.id">
            <video :src="i.high_url" width="100%" height="100%" controls></video>
        </div>

        
    </div>
</template>



<script>
// import { videoApi } from "@/api/video"
  export default {
     data() {
        return {
            videoData:[],
        }
     },
     methods: {
           async getVideoDate() {    
              try {
                 const { data } = await this.$axios.get('/data/video.json')
                // const { data } = await this.$axios.get(videoApi)  //真实数据偶尔出错
                this.videoData = data.items
                console.log(this.videoData);
              } catch (err) {
                 this.$toast('视频加载失败,请稍后再试')
              }
           
            }
     },
     created() {
        this.getVideoDate()
     }

  }


</script>


<style lang="scss"  >
         .video {
             position: relative;
             width: 100vw;
             height: 100vh;
             z-index: 999;
             padding-top: 46px;
             background: var(--theme-background-black);
               .tab{
                 background: rgba(243, 237, 237, 0.1);
                 .van-nav-bar__title {
                   color: #fff;
                 }
              }
             .video-wrap {
                 width: 100vw;
                 height: calc(100vh - 46px);
                 background: var(--theme-background-black);
                 
             }

            
         }
</style>

